www.luotao2008.cn视频网校，仅需要一个耳机+QQ远程即可完成所有教学任务。

题 目:从零学习Flash课件制作(8)

第八节 交互与编程



所谓交互，就是指人与课件的相互作用，比如人对课件的控制，比如播放与停止、跳转到某一画面等等。在前面的学习中，我们可以看到，我们一直没有对课件进行控制，课件打开以后就播放，一直播放完后课件就结束了，那么本节我们就来学习怎样对课件进行控制，说得简单一些，就是该停的时候要能够停下来，该播放时要能播放，想进入哪个环节点击相应按钮就能进入哪个环节，人对课件的控制应简单方便，容易操作。
在Flash中，对课件的控制要通过编程来实现。说到编程，可能很多老师就会头痛，其实对一般的课件来说，我们只需要控制课件的停止、播放和跳转就足够了，而实现这些基本功能的编程非常简单，很容易掌握，所以大家千万不要有畏难心理。只有那些智能化程度比较高的课件才需要复杂一些的编程，但那属于“选修”内容了。
Flash最初是一个矢量动画制作软件，在Flash4.0中才出现了简单的编程语言，称为“ActionScript”。随着Flash版本的提升，编程语言也在不断地发展完善，Flash5.0出现了ActionScript1.0，Flash7.0中运用了ActionScript2.0，Flash CS3又推出了ActionScript3.0，但同时也保留了ActionScript2.0。ActionScript3.0已经是一门功能强大的面向对象编程语言，但正因为功能强大，所以学习起来特别复杂，而课件制作中实现一些简单的交互却根本用不了这些功能，因此这里我们选用了简单易学的ActionScript2.0。
那么编程语句要写在哪里呢？有两个地方，一是可以写在帧上，当课件运行到这帧时就执行帧中的语句，另外可以写在按钮上或者影片剪辑上，但这种方法不被提倡，在ActionScript3.0中已被禁止，因此我们都把语句尽可能写在帧上。
例1 简单的填空题
在本文第一个例子中，我们通过一个简单的填空题评讲课件，来初步认识Flash课件制作中的交互与编程。这个课件的设计是这样的：打开课件后，屏幕上出现的是两道填空题，屏幕右下角有一个按钮，点击这个按钮后，第一个填空题的答案会从屏幕左上角飞入答案括号内，再点击按钮后飞入第二个填空题的答案。显然如果不点击按钮，答案是不会自动飞入的。
制作步骤：
第一步，新建Flash文件。
第二步，输入练习题题目。在舞台上用文本工具 点击设置一个文本框，输入下面的练习题题目：
1、中国的首都是（ ）。
2、中国最大的城市是（ ）。
输完题目后，选中文本框，展开属性面板，设置好文本的大小、颜色及位置后，在时间轴的第20帧插入帧。然后锁定该图层。
第三步，设置第一题答案。新增一图层，在其第2帧插入空白关键帧，在舞台外左上角插入一静态文本框，输入答案“北京”二字，再在第15帧插入关键帧，将左上角的答案移到第1题题目括号处。然后在第1帧至第15帧之间设置补间动画。最后在第30帧插入普通帧，将此图层也锁定。这样就制作完了第1题答案飞入括号内的动画。
第四步，设置第二题的答案。再新增一图层，在第16帧插入关键帧，在舞台右上角插入文本框，输入答案“上海”。在第30帧插入关键帧，把右上角的答案移到题目第2题括号处，最后在第16帧和第30帧之间设置补间动画。
到现在为止，前面我们所做的都是我们学过的内容。但如果现在输出课件，那么课件的播放我们是没法控制的，打开课件后我们还没看清题目，答案就飞进来了。现在我们首先必须让课件在该停的地方能停下来。那么在哪些地方该停下来呢？第1帧该停下来，第1帧出示的是题目，出示题目后当然该停下来让学生看清楚题目想答案。第15帧该停下来，因为第15帧时第1题的答案已经飞进来了，必须停下来讲解第1题，同时让学生回答第2题。最后一帧，也就是第30帧肯定要停下来。实现的方法就是在这3帧写入停止语句。在写入语句以前，我们先来认识写入语句的动作面板。一般情况下，动作面板应该与属性面板一起折叠在窗口最下面，双击即可打开，如果没有，可以通过点击菜单“窗口→动作”打开。在动作面板中输入语句有两种模式，一种是直接输入模式，另一种是脚本助手输入模式。在直接输入模式下所有的语句都要用键盘输入，而在脚本助手模式下只需要在已有的语句条目下找到相关语句，再输入必要的参数就可以了。这两种模式的转换可以通过点击动作面板右上角的“脚本助手”按钮来转换，脚本助手模式下输入窗口要小一些。
第五步，输入停止语句。新增一个图层，选中第1帧，打开动作面板，选择助手模式 。点击窗口左上角的 ，从弹出的菜单中依次选择“全局函数→时间轴控制→stop”，动作面板中自动输入了停止语句“stop()”，这时看时间轴图层4，发现第1帧上有了一个小写的“a”，如图1-8-1，表明我们刚输入的语句“stop()”已经写在了这帧上。我们打开课件时，会首先播放第1帧，也就会执行这个语句，让课件停止在第1帧，不往后播放。然后我们在这一图层的第15帧插入关键帧，选中这一帧，在动作面板中也输入语句“stop()”，在第30帧也插入关键帧，选中这一帧，在动作面板写入语句“stop()”。

图1-8- 1

图1-8- 2


第六步，写入播放语句。我们现在需要设置一个按钮，当点击这个按钮时，让课件继续向前播放。在Flash中，按钮是可以自己制作的，制作方法我们以后再讲，这里我们先用Flash给我们提供的已经做好的公用按钮。新增一个图层，再点击菜单“窗口→公用库→按钮”，打开公用库，如图1-8-2，在库中的文件夹“playback”中将按钮元件元件“rounded green play”拖到舞台右下角。选中按钮，打开属性面板，输入按钮在舞台上的实例名“play_btn”，如图1-8-3。然后我们选中图层4的第1帧，打开动作面板，选择“ActipnScript 2.0类→影片→button→事件处理函数→onRelease”，在动作面板上部“对象”中输入按钮名称“play_btn”，再在左边的窗口中依次选择“全局函数→时间轴控制→Play”，这时再看语句输入窗口，在原有语句“stop()”的后面，已经写入了下面的语句：
play_btn.onRelease = function() {
play();
};
这里“function”是函数的意思，“play_btn”是我们拖到舞台右下角的按钮名，“onRelease”是点击并释放的意思，整句话连起来就是点击并释放按钮“play_btn”后就执行函数，也就是花括后内的语句“play()”，让课件向前播放。需要注意的是，这段语句并不需要在第15帧再写一篇，当课件在第1帧执行这段语句后，在任何地方点击按钮，都会执行花括号中的语句“play()”。这段语句虽然是写在第1帧上的，但实际上是一个响应按钮的语句，也就是点击按钮就执行语句“play()”。所以我们也可以直接把“play()”语句写在按钮上，而不是写在第1帧上，方法是先选中按钮，注意是选中按钮，而不是选中第1帧，然后在动作面板中依次选择“全局函数→时间轴控制→play”，动作面板内就自动生成了下面的语句：
on (release) {
play();
}
这段语句是直接写在按钮上的，意思是点击此按钮后就执行语句“play()”，课件向前播放。前面语句写在时间轴的某一帧上与这里写在按钮上，达到的效果都是一样的，但是我们还是提倡大家按前一种方法写在时间轴上，因为如果写在按钮上，以后修改课件时不太好找语句，写在帧上则一目了然，方便以后修改。

图1-8- 3

图1-8- 4


课件到此就制作完成了，最后让我们来梳理一遍课件的播放流程：打开课件后，执行第1帧中的语句“stop()”，课件停止在第1帧，点击按钮“play_btn”后，执行按钮点击函数花括号中的语句“play()”，课件向前播放，到第15帧后再执行“stop()”停止，再点击按钮，执行语句“play()”，课件向前播放，最后到第30帧遇到“stop()”停止。
时间轴窗口最后如图1-8-4所示。
例2 转盘
在本文的第二个例子中，我们要制作的是一个转盘。在小学数学三年级《可能性》教学中，要学生认识到事情发生的可能性有大有小。其中有这样一道题，在图1-8-5的转盘中，蓝色部分占盘面的一半，红色部分占盘面的三分之一，黄色部分占盘面的六分之一。转动转盘，问题是，当转盘停下时，哪个颜色转到指针处的可能性最大。对课件的要求就是出示一个转盘，转盘上有一个指针，右下角有三个按钮，按开始按钮后转盘开始转动，按暂停按钮后停止转动，按停止按钮后转盘还原。

图1-8- 5

图1-8- 6

图1-8- 7


与上题一样，转盘转动的动画我们是会做的，用补间动画就可完成，问题的关键还是对程序的控制。让转盘停下来只要让播放头停止播放即可，让转盘继续转动只要让播放头继续播放即可，而让转盘还原则要让播放头跳转到第1帧并且停止播放。这三种功能的语句都要写在按钮函数中，也就是点击某一按钮后执行某一功能语句。
制作步骤：
第一步，新建flash文件。
第二步，用椭圆工具绘制一个无填充颜色的圆，再用线条工具绘制一条比圆稍高一些的竖线，选中圆和线，打开对齐面板，让相对于舞台按钮处于选中状态，按一下对齐面板中的水平中齐按钮和垂直中齐按钮，圆被竖线都处于舞台正中心，且圆被线条平均分成左右两半，再删除线条在圆外多余的部分。
第三步，选中并复制竖线，选择菜单“编辑→粘贴到当前位置”，将线条粘贴到原处。再选择菜单“修改→变形→顺时针旋转90度”，将其旋转成一条横线，再单击选中横线左半部分并删除，如图1-8-6。
第四步，选中横线，再点击旋转与变形工具 ，把变形点拖到旋转框最左边。再选择菜单“窗口→变形”，打开变形面板，选中面板中的“旋转”选项，在度数中填入30度，如图1-8-7，按回车键，横线旋转30度，圆被精确的按比例分成三部分。然后选择颜料桶工具 在这三部分分别填充不同的颜色，如图1-8-5。最后选中整个图形，将其组合成一个整体。
第五步，在第5帧插入关键帧，把转盘用旋转工具顺时针旋转45度。在旋转转盘时，要让主工具栏中的“贴紧至对象” 处于选中状态，这样当转盘旋转至45度左右时放下鼠标，转盘会自动停至45度处，而不会旋转出44度或46度来，就好象45度处有一个磁铁在吸引转盘一样。
再依次在第15、20、25、30、35、40插入关键帧，且每次插入关键帧后都把转盘顺时针旋转45度，这样在第40帧时正好旋转了360度，最后在所有相邻关键帧之间建立补间动画。
第六步，新增一图层，绘制一个指向上的指针。
现在转盘转动的动画已经制作完成了，下面要做的就是通过几个按钮控制转盘的转动。
第七步，选择菜单“窗口→公用库→按钮”，打开按钮公用库，从中选择三个按钮拖到图层2舞台右下角，分别是开始按钮、暂停按钮和停止按钮，然后分别选中它们，打开属性面板，将它们的实例名分别命为“play_btn”、“pause_btn”和“stop_btn”。
第八步，插入新图层，在新图层第1帧动作面板写入下面的语句：
stop();//停止在第1帧
play_btn.onRelease = function() {
play();//点击play_btn按钮时开始播放
};
pause_btn.onRelease = function() {
stop();//点击pause _btn按钮时停止播放
};
stop_btn.onRelease = function() {
gotoAndStop(1);//点击stop_btn按钮时跳转并停止到第1帧
};
然后在第40帧插入关键帧，在其动作面板写入跳转到第2帧的语句“gotoAndPlay(2);”。
在上面的语句中，双斜杠“//”后面是注释语句，也就是对语句的解释，注释语句是不执行的。如果语句比较简单，那么有没有注释语句都无所谓，但如果语句比较复杂，则写注释语句就非常必要，以便于以后再打开课件时能看得懂。用双斜杠只能写单行的注释语句，如果注释语句比较长，需要多行，可以写在“/*”与“*/”，课件制作中这种情况比较少。
现在我们测试影片，就可以通过按钮来控制转盘的转动和停止了。但还有一个问题就是转盘转动的速度太慢，我们要求达到的是一种随机选择的效果，也就是要求我们在按停止键前根本不知道选的是哪个颜色，如果转盘转得足够快就可以达到这种随机选择的目的。这里我们用的方法是调整帧频，让每秒播放的帧数多一些就行了。
最后打开文档属性窗口，把帧改为100。
本课件时间轴如图1-8-8所示。

图1-8- 8

例3 活动月历
下面我们要制作的是一个教学用的活动月历。在三年级小学数学课本中，有这样一道练习题：某年4月份有5个星期天，已知4月1日不是星期天，问4月1日是星期几。
对小学三年级学生来说，这题是一道难题，首先要清楚4月份有30天，是4个星期零2天，这4个星期肯定有4个星期天，另外的两天肯定要有一个星期天，如果4月1日不是星期天，那么4月2日就必须是星期天了，4月1日当然就是星期六了。
如何给学生讲清楚这个难点？最好的办法就是制作一个活动的月历，把4月1日是星期一至星期天的七种情况都演示出来，学生就非常清楚了。
制作步骤：
第一步，新建flash文件。
第二步，输入日期。把舞台比例调整为50％，选择文字工具，在属性面板中把文字的字号设为33，字体选华文楷体，在舞台尽量左边位置插入一个文本框，可以超过舞台边界，在文本框中输入作为日期的数字1至30，当数字是一位数时，数与数之间输入4个空格，两位数时输入3个空格，在输入数的过程中不按回车键，也就是让文本保持一行。
第三步，用鼠标把文本框右上角据点向左拖动，原来是单行的文本立即被“挤”成了多行，这样拖到每行刚好是7个数时停止拖动。此时文本应该是每行中上下数都是对齐的，而且每行都应该是7个数，如图1-8-9。

图1-8- 9

图1-8- 10


第四步，在第2帧插入关键帧，在文本框中数字1的左边插入空格键，把文本往右和下“挤”，直到第一行只剩下6个数，如图1-8-10，如果某个地方上下对得不太齐，可以通过调整空格的数量来微调一下。
第五步，用相同的方法，依次在第3至7帧插入关键帧，用在第一行插入空格键的方法调整数的位置，把其它几种情况都制作出来。
第六步，插入新图层，在第1帧日期的上面插入文本框，输入作为星期几的汉字“日一二三四五六”，调整好其大小和位置，和日期对齐。
第七步，插入新图层，打开公用按钮库，从中拖出一个名为“flat blue play”的按钮放在舞台右下角，在属性面板中将其实例名命为“playq_btn”，然后将这个按钮复制一个放在它左边，并水平翻转，命名为“playh_btn”。
第八步，插入新图层，在第1帧写入下面的语句：
stop();//停止在第1帧
playq_btn.onRelease = function() {
nextFrame();//跳转并停止在下一帧
};
playh_btn.onRelease = function() {
prevFrame();//跳转并停止在上一帧
};
这样，课件就制作完成了，时间轴如图1-8-11所示。

图1-8- 11

FLASH课件制作培训班开班了！火热报名中!加我站管理QQ444860709解决任何疑问！ 培训QQ专业群67042004。